<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>首页</title>

        <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet">

        <!-- Toastr style -->
        <link th:href="@{/css/plugins/toastr/toastr.min.css}" rel="stylesheet">

        <!-- Gritter -->
        <link th:href="@{/js/plugins/gritter/jquery.gritter.css}" rel="stylesheet">

        <link th:href="@{/css/animate.css}" rel="stylesheet">
        <link th:href="@{/css/style.css}" rel="stylesheet">

    </head>

    <body>
        <div id="wrapper">
            <nav class="navbar-default navbar-static-side" role="navigation">
                <div class="sidebar-collapse">
                    <ul class="nav metismenu" id="side-menu">
                        <li class="nav-header">
                            <div class="dropdown profile-element">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">惠岩</strong>
                             </span> <span class="text-muted text-xs block">管理员 <b class="caret"></b></span> </span>
                                </a>
                                <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                    <li class="divider"></li>
                                    <li><a href="/">退出登录</a></li>
                                </ul>
                            </div>
                            <div class="logo-element">
                                摆烂
                            </div>
                        </li>
                        <li class="active">
                            <a href="/custom/myAppoint"><i class="fa fa-home"></i> <span class="nav-label">个人中心</span></a>
                        </li>
                        <li>
                            <a href="/dispatcher/graph_flot"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">借阅榜</span></a>
                        </li>
                        <li>
                            <a href="/custom/listBook?bookName="><i class="fa fa-bar-chart-o"></i> <span class="nav-label">浏览馆藏</span></a>
                        </li>
                        <li>
                            <a href="/customer/adminBook/listBook"><i class="fa fa-table"></i> <span
                                    class="nav-label">管理图书</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level collapse">
                                <li><a href="/customer/adminBook/listBook">查看图书</a></li>
                                <li><a href="/customer/adminBook/addBookPage">添加图书</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="/customer/adminUser/listUser?userId="><i class="fa fa-slideshare"></i> <span class="nav-label">管理用户</span><span
                                    class="fa arrow"></span></a>
                            <ul class="nav nav-second-level collapse">
                                <li><a href="/customer/adminUser/listUser?userId=">查看用户</a></li>
                                <li><a href="/customer/adminOperation/listAction?userId=">用户借阅情况</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="/uploadPage"><i class="fa fa-send"></i> <span class="nav-label">文件上传</span></a>
                        </li>
                    </ul>

                </div>
            </nav>

            <div id="page-wrapper" class="gray-bg dashbard-1">
                <div class="row border-bottom">
                    <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                        <div class="navbar-header">
                            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i>
                            </a>
                            <form role="search" class="navbar-form-custom" action="search_results.html">
                                <div class="form-group">
                                    <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                                </div>
                            </form>
                        </div>
                        <ul class="nav navbar-top-links navbar-right">
                            <li>
                                <span class="m-r-sm text-muted welcome-message">欢迎来到摆烂图书管理系统</span>
                            </li>
                            <li>
                                <a href="/">
                                    <i class="fa fa-male"></i> 个人中心
                                </a>
                            </li>
                            <li>
                                <a href="/custom/logout">
                                    <i class="fa fa-sign-out"></i> 退出登录
                                </a>
                            </li>
                        </ul>

                    </nav>
                </div>
                <div class="row  border-bottom white-bg dashboard-header">

                    <div class="col-sm-3">
                        <h2>欢迎您，摆烂大王</h2>
                        <small>您有 壹佰万 条未读消息 和 壹佰万 条通知.</small>
                        <ul class="list-group clear-list m-t">
                            <li class="list-group-item fist-item">
                            <span class="pull-right">
                                    09:00 pm
                                </span>
                                <span class="label label-success">1</span> 请联系我
                            </li>
                            <li class="list-group-item">
                            <span class="pull-right">
                                    10:16 am
                                </span>
                                <span class="label label-info">2</span> 登记信息
                            </li>
                            <li class="list-group-item">
                            <span class="pull-right">
                                    08:22 pm
                                </span>
                                <span class="label label-primary">3</span> 开新店
                            </li>
                            <li class="list-group-item">
                            <span class="pull-right">
                                    11:06 pm
                                </span>
                                <span class="label label-default">4</span> 请回电话
                            </li>
                            <li class="list-group-item">
                            <span class="pull-right">
                                    12:00 am
                                </span>
                                <span class="label label-primary">5</span> 发邮件
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <div class="flot-chart dashboard-chart">
                            <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                        </div>
                        <div class="row text-left">
                            <div class="col-xs-4">
                                <div class=" m-l-md">
                                    <span class="h4 font-bold m-t block">$ 406,100</span>
                                    <small class="text-muted m-b block">销售金额</small>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <span class="h4 font-bold m-t block">$ 150,401</span>
                                <small class="text-muted m-b block">年销售金额</small>
                            </div>
                            <div class="col-xs-4">
                                <span class="h4 font-bold m-t block">$ 16,822</span>
                                <small class="text-muted m-b block">季度销售金额</small>
                            </div>

                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="statistic-box">
                            <h4>
                                项目进度
                            </h4>
                            <p>
                                您有两个未完成的项目任务.
                            </p>
                            <div class="row text-center">
                                <div class="col-lg-6">
                                    <canvas id="polarChart" width="80" height="80"></canvas>
                                    <h5>全民理财</h5>
                                </div>
                                <div class="col-lg-6">
                                    <canvas id="doughnutChart" width="78" height="78"></canvas>
                                    <h5>荣翰</h5>
                                </div>
                            </div>
                            <div class="m-t">
                                <small>您的项目马上就要到截止日期了，请在规定日期内完成任务.</small>
                            </div>

                        </div>
                    </div>

                </div>

                <!--        下部表格信息-->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="wrapper wrapper-content">
                            <div class="row">
                                <div class="wrapper wrapper-content animated fadeInRight">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="ibox float-e-margins">
                                                <div class="ibox-title">
                                                    <h5>我借阅的图书</h5>
                                                    <div class="text-right">

                                                    </div>

                                                </div>
                                                <div class="ibox-content">

                                                    <div class="table-responsive">
                                                        <table class="table table-striped table-bordered table-hover dataTables-example">
                                                            <thead>
                                                            <tr>
                                                                <th>图书号</th>
                                                                <th>图书名</th>
                                                                <th>借阅时间</th>
                                                                <th>操作</th>
                                                            </tr>

                                                            </thead>
                                                            <tbody>
                                                            <tr th:each="Appointment:${list}">
                                                                <td th:text="${Appointment.bookId}"  th:id="dd"></td>
                                                                <td th:text="${Appointment.book.name}" ></td>
                                                                <td th:text="${#dates.format(Appointment.appointTime)}" ></td>
                                                                <td><button th:type="button" class="btn btn-info btn-sm" data-toggle="modal" data-th-placeholder="top" th:title="点击确定" th:value="${Appointment.bookId}" onclick="Appoint(value)" >续借</button>
                                                                    <button th:type="button" class="btn btn-info btn-sm" th:value="${Appointment.bookId}" data-toggle="modal" data-th-placeholder="top" th:title="点击确定" onclick="returnBook(value)" >还书</button>
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                        </table>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="footer">
                            <div class="pull-right">
                                摆烂图书管理系统
                            </div>
                            <div>
                                <strong>Copyright</strong> 摆烂联盟 &copy; 2022
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <!-- Mainly scripts -->
        <script th:src="@{/js/jquery-2.1.1.js}"></script>
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
        <script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>

        <!-- Flot -->
        <script th:src="@{/js/plugins/flot/jquery.flot.js}"></script>
        <script th:src="@{/js/plugins/flot/jquery.flot.tooltip.min.js}"></script>
        <script th:src="@{/js/plugins/flot/jquery.flot.spline.js}"></script>
        <script th:src="@{/js/plugins/flot/jquery.flot.resize.js}"></script>
        <script th:src="@{/js/plugins/flot/jquery.flot.pie.js}"></script>

        <!-- Peity -->
        <script th:src="@{/js/plugins/peity/jquery.peity.min.js}"></script>
        <script th:src="@{/js/demo/peity-demo.js}"></script>

        <!-- Custom and plugin javascript -->
        <script th:src="@{/js/inspinia.js}"></script>
        <script th:src="@{/js/plugins/pace/pace.min.js}"></script>

        <!-- jQuery UI -->
        <script th:src="@{/js/plugins/jquery-ui/jquery-ui.min.js}"></script>

        <!-- GITTER -->
        <script th:src="@{/js/plugins/gritter/jquery.gritter.min.js}"></script>

        <!-- Sparkline -->
        <script th:src="@{/js/plugins/sparkline/jquery.sparkline.min.js}"></script>

        <!-- Sparkline demo data  -->
        <script th:src="@{/js/demo/sparkline-demo.js}"></script>

        <!-- ChartJS-->
        <script th:src="@{/js/plugins/chartJs/Chart.min.js}"></script>

        <!-- Toastr -->
        <script th:src="@{/js/plugins/toastr/toastr.min.js}"></script>
        <script>
            function returnBook(o) {
                console.log(o);
                $.ajax({
                    url:"/custom/returnBook",
                    type:"get",
                    data:{"book_id":o},
                    dataType:"json",
                    contentType:"application/json",
                    error: function (data) {
                        location.reload();
                    },
                    success:function (data) {
                        location.reload();
                    }
                });
            }
        </script>
        <script>
            function Appoint(o) {
                var book_id = o;
                var number = document.getElementById("number");
                console.log(number);

                console.log(o);
                $.ajax({
                    url: "/customer/book/appointAgain",
                    type: "get",
                    data: {"book_id": o},
                    dataType: "json",
                    contentType: "application/json",
                    error: function (data) {
                    },
                    success: function (data) {
                        location.reload();
                    }
                });
            }
        </script>

        <script>
            $(document).ready(function() {
                setTimeout(function() {
                    toastr.options = {
                        closeButton: true,
                        progressBar: true,
                        showMethod: 'slideDown',
                        timeOut: 4000
                    };
                    toastr.success('开始您的摆烂一天^_^~', '欢迎来到图书摆烂系统');

                }, 1300);


                function renewAlert() {
                    setTimeout(function() {
                        toastr.options = {
                            closeButton: true,
                            progressBar: true,
                            showMethod: 'slideDown',
                            timeOut: 4000
                        };
                        toastr.success('续借成功XD');

                    }, 1300)
                };



                var data1 = [
                    [0, 4],
                    [1, 8],
                    [2, 5],
                    [3, 10],
                    [4, 4],
                    [5, 16],
                    [6, 5],
                    [7, 11],
                    [8, 6],
                    [9, 11],
                    [10, 30],
                    [11, 10],
                    [12, 13],
                    [13, 4],
                    [14, 3],
                    [15, 3],
                    [16, 6]
                ];
                var data2 = [
                    [0, 1],
                    [1, 0],
                    [2, 2],
                    [3, 0],
                    [4, 1],
                    [5, 3],
                    [6, 1],
                    [7, 5],
                    [8, 2],
                    [9, 3],
                    [10, 2],
                    [11, 1],
                    [12, 0],
                    [13, 2],
                    [14, 8],
                    [15, 0],
                    [16, 0]
                ];
                $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
                    data1, data2
                ], {
                    series: {
                        lines: {
                            show: false,
                            fill: true
                        },
                        splines: {
                            show: true,
                            tension: 0.4,
                            lineWidth: 1,
                            fill: 0.4
                        },
                        points: {
                            radius: 0,
                            show: true
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#d5d5d5",
                        borderWidth: 1,
                        color: '#d5d5d5'
                    },
                    colors: ["#1ab394", "#1C84C6"],
                    xaxis: {},
                    yaxis: {
                        ticks: 4
                    },
                    tooltip: false
                });

                var doughnutData = [{
                    value: 300,
                    color: "#a3e1d4",
                    highlight: "#1ab394",
                    label: "App"
                }, {
                    value: 50,
                    color: "#dedede",
                    highlight: "#1ab394",
                    label: "Software"
                }, {
                    value: 100,
                    color: "#A4CEE8",
                    highlight: "#1ab394",
                    label: "Laptop"
                }];

                var doughnutOptions = {
                    segmentShowStroke: true,
                    segmentStrokeColor: "#fff",
                    segmentStrokeWidth: 2,
                    percentageInnerCutout: 45, // This is 0 for Pie charts
                    animationSteps: 100,
                    animationEasing: "easeOutBounce",
                    animateRotate: true,
                    animateScale: false
                };

                var ctx = document.getElementById("doughnutChart").getContext("2d");
                var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);

                var polarData = [{
                    value: 300,
                    color: "#a3e1d4",
                    highlight: "#1ab394",
                    label: "App"
                }, {
                    value: 140,
                    color: "#dedede",
                    highlight: "#1ab394",
                    label: "Software"
                }, {
                    value: 200,
                    color: "#A4CEE8",
                    highlight: "#1ab394",
                    label: "Laptop"
                }];

                var polarOptions = {
                    scaleShowLabelBackdrop: true,
                    scaleBackdropColor: "rgba(255,255,255,0.75)",
                    scaleBeginAtZero: true,
                    scaleBackdropPaddingY: 1,
                    scaleBackdropPaddingX: 1,
                    scaleShowLine: true,
                    segmentShowStroke: true,
                    segmentStrokeColor: "#fff",
                    segmentStrokeWidth: 2,
                    animationSteps: 100,
                    animationEasing: "easeOutBounce",
                    animateRotate: true,
                    animateScale: false
                };
                var ctx = document.getElementById("polarChart").getContext("2d");
                var Polarchart = new Chart(ctx).PolarArea(polarData, polarOptions);

            });
        </script>
        </script>
        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

            ga('create', 'UA-4625583-2', 'webapplayers.com');
            ga('send', 'pageview');
        </script>
    </body>

</html>